<template>
<div class="screen-box">
  <div class="screen-content" :class="[$route.meta.name]" :style="{ transform }">
    <router-view/>
  </div>
</div>
</template>

<script>
export default {
  name: 'screen',
  data () {
    return {
      width: 3840
    }
  },
  computed: {
    transform () {
      const width = {
        'screen-school': 3840,
        'screen-city': 7680
        // 'screen-city': 3840
      }
      const { name } = this.$route.meta
      return `scale(${this.width / width[name]})`
    }
  },
  methods: {
    resize () {
      this.width = document.body.offsetWidth
    }
  },
  mounted () {
    this.resize()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  }
}
</script>

<style lang="less">
.screen-box {width: 0;height: 0;}
.screen-content {height: 2160px;background-color: #081413;transform-origin: left top;
  div {box-sizing: border-box;}
  &.screen-school {width: 3840px;}
  &.screen-city {width: 7680px;}
}
</style>
